<template>
  <div class="goods">
    <!-- 头部 -->
    <myheader title="传智播客.黑马程序员Vue.js">
      <template #left>
        <div @click="$router.go(-1)">
          <van-icon name="arrow-left" />
          返回
        </div>
      </template>
      
      <template #right>
        <!-- <div class="f">888</div> -->
      </template>
    </myheader>
    <van-grid :column-num="2" :gutter="10">
      <van-grid-item
        v-for="value in goodsList"
        :key="value.id"
        @click="$router.push({ path: `/GoodsDetial/${value.id}` })"
      >
        <!-- 图片 -->
        <van-image :src="value.img_url" />
        <!-- 介绍文字 -->
        <p class="text">{{ value.title }}</p>
        <!-- 价格 -->
        <div class="price">
          <!-- 价格 -->
          <div>
            <span class="sell">￥{{ value.sell_price }}</span>
            <span class="market">￥{{ value.market_price }}</span>
          </div>
          <!-- 剩余件数 -->
          <div class="hot">
            <span>热卖中</span>
            <span>剩余{{ value.stock_quantity }}件</span>
          </div>
        </div>
      </van-grid-item>
    </van-grid>
  </div>
</template>

<script>
import { getGoodsList } from "@/Api/goods";
import myheader from "@/components/myheader";

export default {
  data() {
    return {
      goodsList: [],
    };
  },
  components: {
    myheader,
  },
  async mounted() {
    let res = await getGoodsList(1);
    // console.log(res);
    this.goodsList = res.data.message;
    // console.log(this.goodsList);
    // console.log(this.goodsList.length);
  },
};
</script>

<style lang="less" scoped>
.van-icon {
  vertical-align: sub;
}
.van-image {
  width: 100%;
  height: 100%;
}
/deep/.van-grid-item__content {
  padding: 0 8px;
}
.van-grid-item {
  box-shadow: -3px 4px 5px 0px #ccc;
}
.text {
  margin: 8px;
}
.price {
  width: 100%;
  height: 80px;
  background: #eee;
  padding: 5px 8px;
}
.sell {
  color: red;
  font-size: 20px;
  font-weight: 700;
  margin-right: 10px;
}
.market {
  text-decoration: line-through;
  font-size: 14px;
}
.hot {
  display: flex;
  justify-content: space-between;
  margin-top: 25px;
}
</style>